<template>
    <div>
        <p class="filter-title">筛选条件：PE、PB、PS、PCF 10年百分位四线碰线</p>
        <div class="filter-results">
            <span class="result-item" style="color: black">今日筛选 > 股票筛选数据</span>
            <span class="result-item">总数：{{total}}</span>
            <span class="result-item">A股：{{zhCount}}</span>
            <span class="result-item">港股：{{hkCount}}</span>
            <span class="result-item">美股：{{usCount}}</span>
            <span class="result-item">日股：{{jaCount}}</span>
        </div>

        <div id="multipleXAxeContainer" class="multipleXAxeContainerClass"></div>
        <div class="time-buttons">
            <button
                v-for="range in ranges"
                :key="range"
                @click="changeTimeRange(range)"
                :class="{ active: activeRange === range }"
            >
                {{ range }}天
            </button>
        </div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts/core';
import {
    TooltipComponent,
    GridComponent,
    LegendComponent
} from 'echarts/components';
import {LineChart} from 'echarts/charts';
import {UniversalTransition} from 'echarts/features';
import {CanvasRenderer} from 'echarts/renderers';
import {onMounted, ref} from 'vue';

import {getlineChart, getMarketCount} from "@/api/index";

echarts.use([
    TooltipComponent,
    GridComponent,
    LegendComponent,
    LineChart,
    CanvasRenderer,
    UniversalTransition
]);
let chartInstance = null;
const us = ref(null)
const hk = ref(null)
const ja = ref(null)
const zh = ref(null)
const total = ref(null)
const zhCount = ref(null)
const usCount = ref(null)
const hkCount = ref(null)
const jaCount = ref(null)
const ranges = [7, 30, 180, 360]    // 按钮对应的天数
const activeRange = ref(7)          // 默认选中 7 天
// 生成模拟数据


// 切换时间范围的函数
const changeTimeRange = (days) => {
    activeRange.value = days

    const tempus = us.value;
    const temphk = hk.value;
    const tempja = ja.value;
    const tempzh = zh.value;

    console.log(tempus.trade_date.slice(tempus.counts.length - days))
    console.log(tempus.counts.slice(tempus.counts.length - days))

    const option = {
        xAxis: {
            data: tempus.trade_date.slice(tempus.counts.length - days)
        },
        series: [
            { data: tempzh.counts.slice(tempzh.counts.length - days) },
            { data: temphk.counts.slice(temphk.counts.length - days) },
            { data: tempus.counts.slice(tempus.counts.length - days) },
            { data: tempja.counts.slice(tempja.counts.length - days) }
        ]
    }
    chartInstance.setOption(option);
}
onMounted(() => {
    // 获取当天年月日
    const currentDate = new Date();
    const year = currentDate.getFullYear();
    const month = String(currentDate.getMonth() + 1).padStart(2, '0');
    const day = String(currentDate.getDate()).padStart(2, '0');
    const today = `${year}${month}${day}`;
    console.log(today)
    getMarketCount().then(response => {
        total.value = response.data.data.num
        zhCount.value = response.data.data.zh
        usCount.value = response.data.data.us
        hkCount.value = response.data.data.hk
        jaCount.value = response.data.data.jp
    })
    getlineChart().then(response => {
        const tempus = response.data.data.us;
        const temphk = response.data.data.hk;
        const tempja = response.data.data.ja;
        const tempzh = response.data.data.zh;

        us.value = response.data.data.us;
        hk.value = response.data.data.hk;
        ja.value = response.data.data.ja;
        zh.value = response.data.data.zh;
        const chartDom = document.getElementById('multipleXAxeContainer');
        chartInstance = echarts.init(chartDom);
        const option = {
            legend: {},
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            xAxis: { type: 'category', data: tempus.trade_date.slice(tempus.counts.length - 7) },
            yAxis: { type: 'value' },
            grid: { top: '10%' },
            series: [
                { itemStyle: { color: '#ff0008' }, lineStyle: { color: '#ff0008' },areaStyle:{color: 'rgba(255,0,0,0.3)'},type: 'line', data: tempzh.counts.slice(tempzh.counts.length - 7), name: 'A股', smooth: true, symbol: 'circle', symbolSize: 6 },
                { itemStyle: { color: '#fff200' }, lineStyle: { color: '#fff200' },areaStyle:{color: 'rgba(255,255,0,0.3)'},type: 'line', data: temphk.counts.slice(temphk.counts.length - 7), name: '港股', smooth: true, symbol: 'circle', symbolSize: 6},
                { itemStyle: { color: '#009dff' }, lineStyle: { color: '#009dff' },areaStyle:{color: 'rgba(0,157,255,0.3)'},type: 'line', data: tempus.counts.slice(tempus.counts.length - 7), name: '美股', smooth: true, symbol: 'circle', symbolSize: 6},
                { itemStyle: { color: '#33ff00' }, lineStyle: { color: '#33ff00' },areaStyle:{color: 'rgba(0,255,0,0.3)'},type: 'line', data: tempja.counts.slice(tempja.counts.length - 7), name: '日股', smooth: true, symbol: 'circle', symbolSize: 6}
            ]
        };
        chartInstance.setOption(option);
    })





});

</script>

<style scoped>
.multipleXAxeContainerClass{
    width: 1200px;
    height: 500px;
}
.time-buttons {
    display: flex;
    gap: 90px;
    margin-bottom: 20px;
    justify-content: center;
}

.time-buttons button {
    background: white;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 200px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
}

.time-buttons button:hover {
    background-color: #eeeeee;
    border-color: #eeeeee;
}

.time-buttons button.active {
    background-color: #e0e0e0; /* 背景加深 */
    border-color: #e0e0e0;
}

/* 筛选数据 */

.filter-title {
    font-size: 14px;
    color: #A2A2A2;
    margin: 0 0 16px 0;
}

.filter-results {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.result-item {
    font-size: 14px;
    color: red;
}

@media (max-width: 480px) {
    .multipleXAxeContainerClass{
        width: 100%;
        height: 240px;
    }
    .filter-title {
        font-size: 14px;
        color: #A2A2A2;
        padding-top: 10px;
        margin: 0 0 16px 0;
    }
    .time-buttons {
        display: flex;
        gap: 40px;
        margin-top: 2%;
    }

    .time-buttons button {
        width: 50px;
        height: 25px;
        padding: 0px 0px;
        background: white;
    }
    .filter-results {
        gap: 10px;
    }
}
</style>
